<template>
  <view class="more-container">
    <view class="book-container" v-for="(item, index) in bookList" :key="index">
      <view class="img-cover">
        <image class="img" :src="item.cover" mode="scaleToFill"></image>
      </view>
      <view class="title uni-ellipsis">{{item.name}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "more",
  data() {
    return {
      bookList: [
        {cover: '../../../static/test/manhua.png', name: '你想要'},
        {cover: '../../../static/test/manhua.png', name: '你想要什么？'},
        {cover: '../../../static/test/manhua.png', name: '漫漫人生路，长啸凯歌行...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.more-container {
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  width: 750rpx;
  height: 340rpx;
  // display: flex;
  // justify-content: space-around;
  // align-items: center;
  // flex-wrap: wrap;
  .book-container {
    /* #ifdef H5 */
    width: 33%;
    /* #endif */
    width: 230rpx;
    margin: 10rpx 10rpx;
    height: 360rpx;
    float: left;
    .img-cover {
      /* #ifdef H5 */
      width: 100%;
      /* #endif */
      width: 230rpx;
      height: 320rpx;
      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .title {
      /* #ifdef H5 */
      width: 100%;
      /* #endif */
      width: 230rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      font-size: 26rpx;
      font-weight: bolder;
    }
  }
}
</style>